<!-- 发布页 图片上传 组件 -->
<template>
	<view>
		<!-- #ifdef MP -->
		<uni-nav-bar  statusBar :border="false">
			<view class="flex align-center justify-center w-100 font-md" @click="changeIsopen">
				{{ isOpenText }} <text class="iconfont icon-shezhi"></text>
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<!-- 文本域 -->
		<!-- 自定义导航 -->
		<uni-nav-bar left-icon="back" statusBar :border="false" @clickLeft="goBack">
			<view class="flex align-center justify-center w-100 font-md" @click="changeIsopen">
				{{ isOpenText }} <text class="iconfont icon-shezhi"></text>
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<!-- 文本域 -->
		<textarea v-model="content" placeholder="说一句话吧~" class="uni-textarea px-2"></textarea>
		<picker mode="selector" :range="range" @change="choosePostClass">
			<!-- 选择分类，选中的分类 -->
			<view class="font-md px-2 py-1 flex">
				<view
					class="border px-3 py flex border-secondary text-dark shadow align-center justify-center"
					style="border-radius: 50px;"
				>
					<text class="iconfont icon-huati mr-1"></text>
					{{ post_class_name ? '所属分类：' + post_class_name : '请选择分类' }}
				</view>
			</view>
		</picker>
		<!-- 选择话题，选中的话题 -->
		<view class="font-md px-2 py-1 flex" @click="chooseTopic">
			<view
				class="border px-3 py flex border-secondary text-dark shadow align-center justify-center"
				style="border-radius: 50px;"
			>
				<text class="iconfont icon-huati mr-1"></text>
				{{ topic.title ? '所属话题：' + topic.title : '请选择话题' }}
			</view>
		</view>

		<!-- 多图上传 ------------------- 接收子组件的自定义事件 -->
		<!-- 这里不能使用v-if 进行隐藏显示，否则会 获取不到 ref节点，无法执行绑定的事件操作 -->
		<uploadImage :show="show" ref="uploadImage" :list="imageList" @change="changeImage"> </uploadImage>
		<!-- 底部操作条 -->
		<view class="fixed-bottom bg-white flex content-center" style="height: 85rpx;z-index: 0;">
			<!-- 发布 帖子分类 使用普通选择器mode = selector
			range 列表数据 ，@change 绑定 选择后的 分类标题
			 -->
			<picker mode="selector" :range="range" @change="choosePostClass">
				<view class="iconfont icon-caidan footer-btn animate__animated" hover-class="animate__jello"></view>
			</picker>
			<!-- 发布话题 -->
			<view
				class="iconfont icon-huati footer-btn animate__animated"
				hover-class="animate__jello"
				@click="chooseTopic"
			></view>
			<!-- 点击触发 多图上传 uploadImage就是一个标识，没什么特殊性-->
			<view
				class="iconfont icon-tupian footer-btn animate__animated"
				hover-class="animate__jello"
				@click="iconClickEvent('uploadImage')"
			></view>
			<!-- 发送按钮 -->
			<view
				class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animate__animated"
				style="width: 140rpx;height: 60rpx;"
				hover-class="animate__jello"
				@click="submit"
			>
				发送
			</view>
		</view>
	</view>
</template>

<script>
	const isOpenArray = ['仅自己可见', '所有人可见'];
	// 引入 多图上传 组件
	import uploadImage from '@/components/common/upload-image.vue';
	export default {
		components: {
			uploadImage,
		},
		data() {
			return {
				// 文本域，内容，双向数据绑定
				content: '',
				// 存放选中的图片，发送到服务端
				imageList: [],
				// 是否已经弹出提示框
				showBack: false,
				//0代表仅自己可见，1代表所有人可见
				isopen: 1,
				// 监听到 话题列表topic-list 事件的参数
				topic: {
					id: 0, // 话题id
					title: '', //话题标题
				},
				// 获取 所有分类 接口，存放所有分类标题
				post_class_list: [],
				// 获取 选中分类的 下标
				post_class_index: -1,
			};
		},
		// 计算属性(最后)
		computed: {
			// 触发 子组件绑定的show
			show() {
				// 如果上传的图片大于 0 ，让子组件图片上传模块 展示
				return this.imageList.length > 0;
			},
			// 判断 展示 仅自己可见，或 所有人可见
			isOpenText() {
				// 按后台的值，渲染 字段
				return isOpenArray[this.isopen];
			},
			// 帖子分类 可选项
			range() {
				// 循环遍历，所有分类
				return this.post_class_list.map((item) => {
					// 返回 遍历好的，分类名字
					return item.classname;
				});
			},
			// 获取 选中 当前分类id
			post_class_id() {
				// 如果 下标 不等于-1，才返回id
				if (this.post_class_index !== -1) {
					return this.post_class_list[this.post_class_index].id;
				}
			},
			// 获取 选中 当前分类的 标题
			post_class_name() {
				if (this.post_class_index !== -1) {
					return this.post_class_list[this.post_class_index].classname;
				}
			},
			// 选中 图片 的id，发送按钮，接口参数需要 图片id
			imgListIds() {
				return this.imageList.map((item) => {
					return {
						id: item.id,
					};
				});
			},
		},
		// 监听页面返回，------------------------------------------------
		onBackPress() {
			// (如果用户有输入的内容，或者，有选中的图片) 并且 还没有弹出提示框
			if ((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				// 提示框
				uni.showModal({
					content: '是否要保存为草稿？',
					showCancel: true, // 是否显示删除按钮
					cancelText: '不保存',
					confirmText: '保存',
					success: (res) => {
						// 成功回调函数
						// 如果点击了 保存或确认
						if (res.confirm) {
							this.store();
							setTimeout(() => {
								// 关闭当前页面，返回上一页面或多级页面
								uni.navigateBack({
									delta: 1,
								});
							}, 1000);
						} else {
							// 点击“不保存“，清除本地缓存的数据
							uni.removeStorage({
								// 移除 之前本地存储,存入的 key为add-input用户的本地缓存数据
								key: 'add-input',
							});
							uni.navigateBack({
								delta: 1,
							});
						}
					},
				});
				// 页面已经显示了提示框，就关闭提示框
				this.showBack = true;
				// 阻止页面上一页
				return true;
			}
		},
		// 页面加载时 --------------------------------------------------
		onLoad() {
			// 一进入页面，从本地存储，取到之前保存的数据
			uni.getStorage({
				key: 'add-input',
				success: (res) => {
					// 如果本地存储有数据，拿到并赋值
					if (res.data) {
						let result = JSON.parse(res.data);
						this.content = result.content; // 赋值内容
						this.imageList = result.imageList; // 赋值图片
					}
				},
			}),
				// 监听选择话题 事件 $emit('发布的事件'，传入的对象)
				uni.$on('chooseTopic', (e) => {
					this.topic.id = e.id; // 话题 id
					this.topic.title = e.title; // 话题标题
				});
			// 调用 获取分类 方法
			this.getPostClass();
		},
		// 页面实例即将摧毁之前
		beforeDestroy() {
			// 注销 监听的事件，并且传入一个空的回调函数
			uni.$off('chooseTopic', (e) => {});
		},
		// 用于存放 所有的事件 -------------------------------------------
		methods: {
			// 发布
			submit() {
				if (this.topic.id == 0) {
					return uni.showToast({
						title: '请选择话题',
						icon: 'none',
					});
				}
				if (this.post_class_id == 0) {
					return uni.showToast({
						title: '请选择分类',
						icon: 'none',
					});
				}
				uni.showLoading({
					// loading状态
					title: '发布中...',
					mask: false,
				});
				// 请求 发布文章 接口
				this.$H
					.post(
						'/post/create',
						{
							// 请求参数
							imglist: JSON.stringify(this.imgListIds), // 选中的图片
							text: this.content, // 输入的文本
							isopen: this.isopen, // 仅自己 或 所有人可见
							topic_id: this.topic.id, // 话题id
							post_class_id: this.post_class_id, // 选中 当前分类id
						},
						{ token: true },
					)
					.then((res) => {
						// 隐藏 loading弹出框
						uni.hideLoading();
						// 通知 首页index组件，发布成功
						uni.$emit('updateIndex');
						uni.showToast({
							title: '发布成功',
							icon: 'none',
						});
						// 关闭 保存草稿提示
						this.showBack = true;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 800);
					})
					.catch((err) => {
						uni.hideLoading();
					});
			},
			// 获取所有帖子分类
			getPostClass() {
				this.$H.get('/postclass').then((res) => {
					// 获取所有分类，上面使用computed计算属性，循环遍历
					this.post_class_list = res.list;
				});
			},
			// 选择帖子分类
			choosePostClass(e) {
				/* console.log('当前选中的分类下标'+e.detail.value);*/
				this.post_class_index = e.detail.value;
			},
			// 切换可见性
			changeIsopen() {
				// 从底部向上弹出操作菜单
				uni.showActionSheet({
					itemList: isOpenArray, // 选择的列表。上面 定义的仅自己或所有人
					success: (res) => {
						// tapIndex 用户点击的按钮，从上到下的顺序，从0开始(官方参数)
						this.isopen = res.tapIndex; // 将索引赋值给 isopen
					},
				});
			},
			// 底部导航，图片图标 点击事件
			iconClickEvent(e) {
				// 条件判断
				switch (e) {
					// 如果 点击的是图片图标
					case 'uploadImage':
						// 通过ref获取 子组件节点，触发chooseImage 上传图片事件
						this.$refs.uploadImage.chooseImage();
						break;
				}
			},
			// 顶部自定义导航，返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 选中图片
			changeImage(e) {
				this.imageList = e;
				// console.log(this.imageList);
			},
			// 保存草稿， 操作
			store() {
				// 需要存入的 信息
				let obj = {
					content: this.content,
					imageList: this.imageList,
				};
				// 异步操作，保存为本地存储
				uni.setStorage({
					// 本页面，创建的名称作为key值
					key: 'add-input',
					data: JSON.stringify(obj),
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						});
					},
				});
			},
			// 发布话题 图标事件
			chooseTopic() {
				uni.navigateTo({
					// 进入 话题分类页，传入参数choose=true
					url: '../topic-nav/topic-nav?choose=true',
				});
			},
		},
	};
</script>

<style lang="scss">
	.footer-btn {
		width: 86rpx;
		height: 86rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: 50rpx;
	}
</style>
